import { Link, Outlet } from 'react-router-dom';
import { ScrollText, Search, PenTool, User } from 'lucide-react';
import { useAuth } from '../contexts/AuthContext';

export function Layout() {
  const { user, signOut } = useAuth();

  return (
    <div className="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100">
      {/* Header */}
      <header className="bg-white shadow-sm sticky top-0 z-10">
        <div className="max-w-7xl mx-auto px-4 py-4">
          <div className="flex items-center justify-between">
            <Link to="/" className="flex items-center space-x-4">
              <ScrollText className="h-8 w-8 text-emerald-600" />
              <h1 className="text-2xl font-bold text-gray-900">诗词雅集</h1>
            </Link>
            
            <div className="flex items-center space-x-6">
              <Link to="/search" className="text-gray-600 hover:text-emerald-600">
                <Search className="h-6 w-6" />
              </Link>
              <Link to="/create" className="text-gray-600 hover:text-emerald-600">
                <PenTool className="h-6 w-6" />
              </Link>
              {user ? (
                <div className="flex items-center space-x-4">
                  <Link to={`/user/${user.id}`} className="flex items-center space-x-2">
                    <User className="h-6 w-6" />
                    <span className="text-gray-700">我的主页</span>
                  </Link>
                  <button
                    onClick={() => signOut()}
                    className="px-4 py-2 text-sm font-medium text-white bg-emerald-600 rounded-full hover:bg-emerald-700"
                  >
                    退出
                  </button>
                </div>
              ) : (
                <Link
                  to="/login"
                  className="px-4 py-2 text-sm font-medium text-white bg-emerald-600 rounded-full hover:bg-emerald-700"
                >
                  登录
                </Link>
              )}
            </div>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="max-w-7xl mx-auto px-4 py-8">
        <Outlet />
      </main>

      {/* Footer */}
      <footer className="bg-white border-t mt-12">
        <div className="max-w-7xl mx-auto px-4 py-6">
          <p className="text-center text-gray-600">诗词雅集 © 2024 - 传承中国诗词文化</p>
        </div>
      </footer>
    </div>
  );
}